<template>
  <div class="wrapper">
    <div class="search">
      <span class="iconfont">&#xe6e1;</span>
      <input
        class="search__area"
        @change="handleSearchChange"
        placeholder="山姆会员商店优惠商品"
      />
      <div class="search__cancel" @click="handleCancelSearchClick">取消</div>
    </div>
    <div class="area">
      <h4 class="area__title" v-show="history.length">
        搜索历史
        <span class="area__title__clear" @click="handleClearHistoryClick"
          >清除搜索历史</span
        >
      </h4>
      <ul class="area__list">
        <li
          class="area__list__item"
          v-for="item in history"
          @click="goToSearchList(item)"
        >
          {{ item }}
        </li>
      </ul>
    </div>
    <div class="area">
      <h4 class="area__title">热门搜索</h4>
      <ul class="area__list">
        <li
          class="area__list__item"
          v-for="item in hotWordsList"
          @click="goToSearchList(item)"
        >
          {{ item }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';
import { get } from '@/utils/request';
import { useRouter } from 'vue-router';

// 获取热搜词逻辑
const useHotWordsListEffect = () => {
  const hotWordsList = ref([]);
  const getHotWordsList = async () => {
    try {
      const result = await get('/api/shop/search/hot-words');
      console.log('result: ', result);
      if (result?.errno === 0 && result?.data?.length) {
        hotWordsList.value = result.data;
      }
    } catch (error) {}
  };
  getHotWordsList();
  return { hotWordsList, getHotWordsList };
};

export default {
  name: 'Search',
  components: {},
  setup() {
    const router = useRouter();
    const history = ref(JSON.parse(localStorage.history || '[]')); //从本地取搜索历史或空数组
    const handleSearchChange = (e) => {
      const searchValue = e.target.value;
      if (!searchValue) {
        return;
      }
      //判断当前搜索词是否存在于本地搜索历史
      const hasValue = history.value.find((item) => item === searchValue);
      if (!hasValue) {
        history.value.push(searchValue);
        localStorage.history = JSON.stringify(history.value); //更新localStorage数据
      }
      router.push(`/searchList?keyword=${searchValue}`);
    };
    // 清理搜索历史
    const handleClearHistoryClick = () => {
      history.value = [];
      localStorage.history = JSON.stringify(history.value); //更新localStorage数据
    };
    // 点击取消
    const handleCancelSearchClick = () => {
      router.back();
    };
    // 热搜词列表
    const { hotWordsList } = useHotWordsListEffect();
    // 点击热搜词 搜索历史跳转
    const goToSearchList = (keywords) => {
      const searchValue = keywords;
      if (!searchValue) {
        return;
      }
      //判断当前搜索词是否存在于本地搜索历史
      const hasValue = history.value.find((item) => item === searchValue);
      if (!hasValue) {
        history.value.push(searchValue);
        localStorage.history = JSON.stringify(history.value); //更新localStorage数据
      }
      router.push(`/searchList?keyword=${keywords}`);
    };
    return {
      history,
      hotWordsList,
      handleSearchChange,
      goToSearchList,
      handleClearHistoryClick,
      handleCancelSearchClick,
    };
  },
};
</script>

<style lang="scss" scoped>
@import '@/style/viriables.scss';
@import '@/style/mixins.scss';
.wrapper {
  margin: 0 0.18rem;
  .search {
    position: relative;
    display: flex;
    line-height: 0.32rem;
    margin-top: 0.16rem;
    color: $content-fontcolor;
    .iconfont {
      position: absolute;
      left: 0.16rem;
      color: $search-fontColor;
    }
    &__area {
      flex: 1;
      padding: 0 0.12rem 0 0.44rem;
      background: $search-bgColor;
      border-radius: 0.16rem;
      border: none;
      outline: none;
      font-size: 0.14rem;
    }
    &__cancel {
      margin-left: 0.12rem;
      font-size: 0.16rem;
    }
  }
  .area {
    margin-top: 0.24rem;
    &__title {
      line-height: 0.22rem;
      margin: 0;
      font-size: 0.16rem;
      font-weight: normal;
      color: $content-fontcolor;
      &__clear {
        float: right;
        font-size: 0.14rem;
      }
    }
    &__list {
      margin: 0 0 0 -0.1rem;
      padding: 0;
      list-style-type: none;
      &__item {
        line-height: 0.32rem;
        margin-left: 0.1rem;
        margin-top: 0.12rem;
        padding: 0 0.1rem;
        font-size: 0.14rem;
        background: $search-bgColor;
        display: inline-block;
        border-radius: 0.02rem;
        color: $medium-fontColor;
      }
    }
  }
}
</style>
